import { useEffect, useState } from 'react';
import { userCols } from './config';
import styles from './index.module.less';
import { Button, Col, Form, Input, InputNumber, Radio, Row, Select, Space, Table, message } from 'antd';

const { TextArea } = Input;

const Index = () => {
  const [form] = Form.useForm();
  const [userData, setUserData] = useState([]);
  const [processMsg, setProcessMsg] = useState('');
  const [userBtnLoading, setUserBtnLoading] = useState(false);
  const [loginBtnLoading, setLoginBtnLoading] = useState(false);
  const [commentBtnLoading, setCommentBtnLoading] = useState(false);
  const [commentList, setCommentList] = useState<any []>([]);
  // 开始处理
  const handlerStart = () => {
    if (!userData.length) {
      message.warning('请先生成用户');
      return;
    }
    setCommentBtnLoading(true);
    form.validateFields(['worksUrl', 'commentData']).then(formData => {
      
      const commentData = formData.commentData.split('\n');
      if (commentData.length > useState.length) {
        setCommentBtnLoading(false);
        message.warning('评论数大于用户数请重新生成用户');
        return;
      }
      setProcessMsg('开始评论');
      window.electron.ipcRenderer.startCrawler(formData.worksUrl, commentData, userData, formData.isProxy);
    });
    // const path = '';
    // window.api.startCrawler(path);
  };

  const handlerGetChild = () => {
    setCommentBtnLoading(true);
    form.validateFields(['worksUrl']).then(formData => {
      setProcessMsg('开始获取评论');
      window.electron.ipcRenderer.getComment(formData.worksUrl).then(res => {
        setCommentList(res);
        setCommentBtnLoading(false);
        setProcessMsg('完成');
      }, (err) => {
        setCommentBtnLoading(false);
        message.warning(err.message);
      });
    }, (err) => {
      setCommentBtnLoading(false);
    });
  };

  const handlerLogin = () => {
    setLoginBtnLoading(true);
    form.validateFields(['projectId', 'userName', 'password']).then((formData: any) => {
      setProcessMsg('开始登录');
      window.electron.ipcRenderer.damiLogin(formData.projectId, formData.userName, formData.password).then(res => {
        setLoginBtnLoading(false);
        setProcessMsg('完成');
      }, (err) =>{
        setLoginBtnLoading(false);
        message.warning(err.message);
      });
    }, () => {
      setLoginBtnLoading(false);
    });
  };

  // 生成用户
  const handlerUser = () => {
    setUserBtnLoading(true);
    form.validateFields(['userCount']).then((formData: any) => {
      setProcessMsg('开始生成用户');
      window.electron.ipcRenderer.generateUser(formData.userCount, formData.isProxy).then(res => {
        setUserData(res);
        setUserBtnLoading(false);
        setProcessMsg('完成');
      }, (err) =>{
        setUserBtnLoading(false);
        message.warning(err.message);
        console.log(err);
      });
    }, () => {
      setUserBtnLoading(false);
    });
  };

  const addEventListener = () => {
    window.electron.ipcRenderer.on('comment-step', (msg) => {
      setProcessMsg(msg as string);
    });
  }

  useEffect(() => {
    addEventListener();
  }, []);

  return (
    <div className={styles.container}>
      <Form
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
      >
        <Row>
          <Col span={6}>
            <Form.Item name="projectId" label="项目id" rules={[{ required: true, message: "请填写项目id" }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="userName" label="用户名" rules={[{ required: true, message: "请填写用户名" }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="password" label="用户密码" rules={[{ required: true, message: "请填写用户密码" }]}>
              <Input />
            </Form.Item>
          </Col>
          <Button loading={loginBtnLoading} onClick={handlerLogin}>登录三方</Button>
        </Row>
        <Row>
          <Col span={6}>
            <Form.Item name="userCount" label="用户数量" rules={[{ required: true, message: "请填写用户数量" }]}>
              <InputNumber style={{ width: '100%' }} controls={false} />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="isProxy" label="使用代理">
              <Radio value={true} />是
            </Form.Item>
          </Col>
          <Button loading={userBtnLoading} onClick={handlerUser}>生成用户</Button>
        </Row>
        {/* <Button onClick={handlerStart} type='primary' icon={<UploadOutlined />}>开始</Button> */}
        <div>
          <Table rowKey="userId" pagination={false} dataSource={userData} columns={userCols}></Table>
        </div>
        <Form.Item style={{ marginTop: 20 }} name="worksUrl" label="作品id" rules={[{ required: true, message: "请填写作品id" }]}>
          <Input placeholder="请输入作品id" />
        </Form.Item>
        <Form.Item style={{ marginTop: 20 }} name="commentList" label="评论列表">
          <Select allowClear mode="multiple" >
            {
              commentList.map(comment => <Select.Option value={comment.commentId}>{comment.content}</Select.Option>)
            }
          </Select>
        </Form.Item>
        <Form.Item label="评论内容（一行一条）" name="commentData" rules={[{ required: true, message: "请填写评论内容" }]}>
          <TextArea />
        </Form.Item>
        {/* <div>@</div>
        <Form.Item label="账号">
          <Input />
        </Form.Item> */}
      </Form>
      <div>
        <Space>
          <Button type='primary' loading={commentBtnLoading} onClick={handlerGetChild}>获取评论</Button>
          <Button type='primary' loading={commentBtnLoading} onClick={handlerStart}>开始评论</Button>
        </Space>
      </div>
      <div className={styles.message}>
        <div>通知：{processMsg}</div>
      </div>
    </div>
  )
}

export default Index;
